<template>
  <div>
    <table-ext :columns="columns" :searchForm="searchForm" :config="config" ref="tableExt" @checkedData="getCheckedData">
      <template slot="table-action">
        <el-button type="primary" icon="el-icon-delete" @click="openCloseDialog()">关闭</el-button>
      </template>
    </table-ext>
    <el-dialog title="关闭采购申请" :visible="dialogVisible">
      <el-form :model="closeForm" ref="closeForm">
        <el-form-item label="关闭原因：" prop="reason">
          <el-input type="textarea" v-model="closeForm.reason"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closePr()">提交</el-button>
        <el-button @click="cancleDialog('closeForm')">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import TableExt from '@/components/common/table-ext/table-ext.vue';
  import TableIcon from '@/components/common/table-ext/table-icon';
  import qs from 'qs';
  export default {
    // 引入自定义表格组件
    components:{
      'table-ext': TableExt
    },
    data() {
      return {
        dialogVisible:false,
        // 关闭表单对象
        closeForm:{
          reason:'',
          ids:''
        },
        // 选中的数据
        checkedData:[],
        config:{ // 页面共通配置
          title: '采购申请', //页面标题
          isPage: true, //是否分页
          isNo: true, //是否显示序号
          selection: true, //是否显示复选框
          crudMapping:{ // CRUD方法
            query:{
              url: this.lib.config.host.prModule + "/purchaserequest/buyer/query",
            }
          }
        },
        // 查询表单配置
        searchForm:[{
          label: '采购组',
          key: 'groupId',
          type: 'select',
          dict: {
            url: this.lib.config.host.masterData + "/mdata/purOrgMgt/purGroup/getByUserId/" + this.getCurrUserId(),
            method: 'post',
            label: 'purGroupName',
            value: 'id'
          }
        },{
          label: '工厂:',
          key: 'factoryId',
          type: 'select',
          dict: {
            url:  this.lib.config.host.masterData + '/system/factoryMgt/factorys/getFactoryByUserId/' + this.getCurrUserId(),
            method: 'post',
            label: 'factoryName',
            value: 'factoryId'
          }
        },{
          label: '单据号:',
          key: 'prNo',
          type: 'input'
        },{
          label: '申请类型:',
          key: 'erpTypeNo',
          type: 'input'
        },{
          label: '处理状态:',
          key: 'handleStatus',
          type: 'select',
          dict: [{
            key: '0',
            value: '未处理'
          },{
            key: '1',
            value: '已处理'
          }]
        },{
          label: '发布状态:',
          key: 'publishStatus',
          type: 'select',
          dict: [{
            key: '0',
            value: '未发布'
          },{
            key: '1',
            value: '已发布'
          }]
        },{
          label: '审核状态:',
          key: 'checkStatus',
          type: 'select',
          dict: [{
            key: '0',
            value: '未开始'
          },{
            key: '1',
            value: '通过'
          },{
            key: '3',
            value: '待审核'
          },{
            key: '-1',
            value: '驳回'
          }]
        },{
          label: '关闭状态:',
          key: 'closeStatus',
          type: 'select',
          dict: [{
            key: '0',
            value: '未关闭'
          },{
            key: '1',
            value: '已关闭'
          }]
        },{
          label: '发布开始日期:',
          key: 'startTime',
          type: 'date',
        },{
          label: '发布结束日期:',
          key: 'endTime',
          type: 'date',
        }],
        // 表格列定义
        columns:[{
          label: '单据编号',
          key: 'srmPrNo',
          align: 'center',
          render:(createElement, params)=>{ // 动态渲染，click事件示例
            let _this = this;
            return createElement('div', {}, 
            [createElement('a', {
                style: {
                  color: '#409EFF',
                  cursor: 'pointer'
                },
                on: {
                  click() {
                    _this.toView(params.row.id);
                  }
                }
              }, params.row.applyNo)
            ]);
          }
        },
        {
          label: '申请类型',
          key: 'erpTypeNo',
          align: 'center'
        },{
          label: '申请类型',
          key: 'erpTypeNo',
          align: 'center'
        },{
          label: '发布状态',
          key: 'publishStatus',
          align: 'center',
          render:(createElement, params)=>{ //动态渲染, 字典表示例
            return createElement(TableIcon,{props:{
                flag: params.row.checkStatus,
                titles: [{status:0,title:'未发布'},{status:1,title:'已发布'}]
            }});
          }
        },{
          label: '发布日期',
          key: 'publishTime',
          align: 'center',
        },{
          label: '审核状态',
          key: 'checkStatus',
          align: 'center',
          render:(createElement, params)=>{ //动态渲染, 字典表示例
            return createElement(TableIcon,{props:{
                flag: params.row.checkStatus,
                titles: [{status:0,title:'未开始'},{status:1,title:'通过'},{status:3,title:'待审核'},{status:-1,title:'驳回'}]
            }});
          }
        },{
          label: '审核日期',
          key: 'checkTime',
          align: 'center',
        },{
          label: '处理状态',
          key: 'handleStatus',
          align: 'center',
          render:(createElement, params)=>{ //动态渲染, 字典表示例
            return createElement(TableIcon,{props:{
                flag: params.row.handleStatus,
                titles: [{status:0,title:'未处理'},{status:1,title:'已处理'},{status:3,title:'部分处理'}]
            }});
          }
        },{
          label: '关闭状态',
          key: 'closeStatus',
          align: 'center',
          render:(createElement, params)=>{ //动态渲染, 字典表示例
            return createElement(TableIcon,{props:{
                flag: params.row.closeStatus,
                titles: [{status:0,title:'未关闭'},{status:1,title:'已关闭'}]
            }});
          }
        },{
          label: '备注',
          key: 'remarks',
          align: 'center',
          width:'300px'
        }]
      };
    },
    mounted() {
       //this.initData();
    },
    methods: {
      initData(){
        // 获取采购组织
        this.getSelectData('get', this.lib.config.host.masterData + '/system/purOrgMgt/purOrg/getPurOrgByUserId/' + this.getCurrUserId(), {}, 'id', 'purOrgName').then((data)=>{
            this.purOrgOptions = data;
        });
      },
      // 采购组织在改变的时候查询采购组
      handleChange(value) {
        // 获取srm采购组
        this.getSelectData('post', this.lib.config.host.masterData + '/mdata/purOrgMgt/purGroup/getByPurOrgId/' + value, {}, 'id', 'purGroupName').then((data)=>{
            this.relationPurGroup = data;
        });
        // 获取采购组织对应的工厂
        this.getSelectData('post', this.lib.config.host.masterData + '/system/factoryMgt/factorys/getFactoryByPurId/' + value, {}, 'id', 'factoryName').then((data)=>{
            this.relationFactory = data;
        });
      },
      // 获取选中的数据
      getCheckedData(data){
        this.checkedData = data;
      },
      // 打开关闭对话框
      openCloseDialog(){
        this.dialogVisible = true;
      },
      // 关闭采购申请
      closePr(){
        let isRequest = true;
        if(this.checkedData.length <= 0){
          this.$message({
            type:'warning',
            message:'请选择记录进行关闭!'
          })
        } else {
          // 声明一个有效的id数组集合
          let ids = [];
          this.checkedData.forEach(element =>{
            if(element.closeStatus === 1){
              this.$message({
                type:'warning',
                message:'申请单号:' + element.srmPrNo + ',已关闭无法重复关闭！'
              })
              return isRequest = false;
            }
            // 已处理，无法关闭
            if(element.handleStatus === 1){
              this.$message({
                type:'warning',
                message:'申请单号:' + element.srmPrNo + ',已处理无法关闭！'
              })
              return isRequest = false;
            }
            ids.push(element.id);[]
          });
          if(isRequest){ //是否发起请求
            this.closeForm.ids = ids.join(',');
              this.axios.post(this.lib.config.host.prModule + '/purchaserequest/match/closePR', qs.stringify(this.closeForm))
              .then((res) =>{
                if(res.data.success){
                  this.$message({
                    type:'success',
                    message:'关闭成功！'
                  })
                  // 刷新表格
                  this.$refs['tableExt'].refreshTable();
                } else {
                  this.$message({
                    type:'error',
                    message: res.data.message
                  })
                }
              })
              .catch((error)=>{
                this.$message({
                  type: 'error',
                  message: error
                });
              });
          }
        }
      },
      // 取消对话框
      cancleDialog(formObj){
        this.resetForm(formObj);
        this.dialogVisible = false;
      },
      // 跳转至匹配页面
      toView(id) {
        this.$router.push({path: '/Index/Rfq/PurRequest/PurReqMatchTab', query:{'prId':id}})
       // window.open('/PurReqMatchTab?prId='+ id)
      },
    }
  }
</script>